<link rel="stylesheet" href="/cn/css/exerciseNew/listenDetail.css?v=1.3">
<script type="text/javascript" src="/cn/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/cn/js/jq-ui.min.js"></script>
<script type="text/javascript" src="https://file.viplgw.cn/ui/public/lib/vue/vue.js"></script>

<section id="exerciseDetail" v-cloak>
    <!-- 顶部 -->
    <div class="headNav">
        <template>
            <div class="promptTop" v-if="isPop">由于受浏览器音频自动播放策略影响，如果遇到无法正常自动播放音频请点击 <span>「播放」</span> 按钮播放音频重试一下吧 >_<
                <span @click="isPop = false" style="margin-left: 10px;">×</span></div>
            <div class="w12 headContent">
                <div class="headTitle">剑雅听力 {{dataQuestion!=''?dataQuestion.article.name:''}}</div>

                <div class="operateBtn">
                    <a href="/cn/exercise/<?php echo $tmp_name;?>?category=all" class="upData">退出</a>
                    <!-- 音频地址 -->
                    <audio id="bgAudio"
                           :src="dataQuestion!=''?dataQuestion.topic[0].parent.listeningFile[0]:''"
                           controls></audio>
                    <!-- 拖拽按钮 -->
                    <div class="volumdx">
                        <img src="/cn/images/exerciseNew/20.png" alt="" class="volumHx">
                        <img id="dragVolum" class="volumBtn" src="/cn/images/exerciseNew/21.png" alt="">
                    </div>
                    <a href="javascript:void(0)" class="playBtn" @click="playAudio">
                        <img :src="isPlay?'/cn/images/exerciseNew/stop.png':'/cn/images/exerciseNew/17@2x.png'" alt="">
                        <span>{{isPlay?'暂停':'播放'}}</span>
                    </a>

                    <a :href="'/cn/exercise/listen-detail?content_id='+ content_id" class="upData" style="margin-right: 25px;background:#795FC2;color: white">重新练习</a>
                    <img src="/cn/images/exerciseNew/16@2x.png"  alt="" class="fullScreen" @click="launchFullscreen">
                </div>
            </div>
        </template>
    </div>
    <input type="hidden" value="<?php echo $content_id ?>" name="content_id" id="content_id">
    <!-- 做题部分 -->
    <div class="exerciseCenter">
        <!-- 文章 -->
        <div class="fullText">
            <a href="javascript:void(0)" class="original"
               @click="isOriginal = !isOriginal">{{isOriginal?'查看原文':'显示空白'}}</a>
            <div class="articleText" id="articleText">
                <div v-show="!isOriginal"
                     v-html="dataQuestion!=''?dataQuestion.topic[0].son[0].problemComplement:''"></div>
            </div>
        </div>
        <!-- 题目 -->
        <div class="subject">
            <p class="original">题目</p>
            <template>
                <div class="articleText" v-cloak>
                    <div class="outDiv" v-for="(item,index) in dataQuestion.topic" :id="item.parent.type">
                        <!--单选题  type 2-->
                        <div class="" v-if="item.parent.type == 2">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.description"></div>
                            <div class="singleBox ItemIn" v-for="(itemSon,indexSon) in item.son"
                                 :id="'listen_'+ itemSon.content_id">
                                <div class="singleTitle">
                                    <div v-html="itemSon.description"></div>
                                    <img class="spin" src="/cn/images/exerciseNew/13@2x.png" alt=""
                                         @click="toggle($event)">
                                </div>
                                <div class="singleZt">
                                    <div :class="{'doFalse':(itemSon.alternatives != itemSon.my_answer) && (itemSon.my_answer == letterArry[indexSonDes]) ,'rightAnswer':letterArry[indexSonDes] == itemSon.alternatives,'singleCover':true}" v-for="(itemSonDes,indexSonDes) in itemSon.answer">
                                        <input :id="itemSon.id+'_'+indexSonDes" disabled type="radio" class="radioBox"
                                               :checked="itemSon.my_answer == letterArry[indexSonDes]"
                                               :value="letterArry[indexSonDes]">
                                        <label :for="itemSon.id+'_'+indexSonDes">
                                            <span style="margin-right: 5px;"></span>
                                            {{letterArry[indexSonDes]}}.
                                            <p v-html="itemSonDes"></p>

                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--多选题  type 3-->
                        <div class="" v-if="item.parent.type == 3">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle" v-html="item.parent.description"></div>
                            <div class="singleBox ItemIn" v-for="(itemSon,indexSon) in item.son"
                                 :id="'listen_'+ itemSon.content_id">
                                <div class="singleTitle">
                                    <div v-html="itemSon.description"></div>
                                    <img class="spin" src="/cn/images/exerciseNew/13@2x.png" alt=""
                                         @click="toggle($event)">
                                </div>
                                <div class="singleZt">
                                    <div :class="{'doFalse':(itemSon.my_answer.indexOf(letterArry[indexSonDes])!=-1)&& (itemSon.alternatives.indexOf(letterArry[indexSonDes])==-1),'rightAnswer':itemSon.alternatives.indexOf(letterArry[indexSonDes])!=-1 ,'singleCover':true}" v-for="(itemSonDes,indexSonDes) in itemSon.answer">
                                        <input :id="itemSon.id+'_'+indexSonDes" disabled type="checkbox" class="radioBox"
                                               :checked="itemSon.my_answer.indexOf(letterArry[indexSonDes])!=-1"
                                               :value="letterArry[indexSonDes]">
                                        <label :for="itemSon.id+'_'+indexSonDes">
                                            <span style="margin-right: 5px;"></span>
                                            {{letterArry[indexSonDes]}}.<b v-html="itemSonDes"></b></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  首先是正常的表格填空-->
                        <div class="" v-if="item.parent.type == 1">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle tableCover" v-html="item.parent.description"></div>
                            <p class="trueAnswerTitle">正确答案:</p>
                            <div class="trueAnswerCover">
                                <p class="trueAnswerItem" v-for="(trueItem,trueIndex) in item.son">{{trueItem.qNum}}. <span>{{trueItem.alternatives}}</span></p>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  图片图形填空题-->
                        <div class="" v-if="item.parent.type == 5">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle" v-for="(itemSon,indexSon) in item.parent.description">
                                <div v-html="itemSon"></div>
                            </div>
                            <p class="trueAnswerTitle">正确答案:</p>
                            <div class="trueAnswerCover">
                                <p class="trueAnswerItem" v-for="(trueItem,trueIndex) in item.son">{{trueItem.qNum}}. <span>{{trueItem.alternatives}}</span></p>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  配对填空题 分两种-->
                        <div class="" v-if="item.parent.type == 4&&item.parent.questionType !=2">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div>
                                <div class="artiOption" v-for="(itemSon,indexSon) in item.parent.description">
                                    <div v-html="itemSon"></div>
                                </div>
                                <div class="artiOption" v-for="(itemSentence,indexSentence) in item.son[0].answer">
                                    <div>{{itemSentence}}</div>
                                </div>
                            </div>
                            <p class="trueAnswerTitle">正确答案:</p>
                            <div class="trueAnswerCover">
                                <p class="trueAnswerItem">{{item.son[0].name}}. <span>{{item.son[0].alternatives}}</span></p>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  配对填空题 分两种-->
                        <div class="" v-if="item.parent.type == 4&&item.parent.questionType ==2">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div>
                                <div class="artiOption" v-for="(itemSon,indexSon) in item.parent.description">
                                    <div v-html="itemSon"></div>
                                </div>
                                <div class="artiOption" v-for="(itemSentence,indexSentence) in item.son[0].answer">
                                    <div>{{itemSentence}}</div>
                                </div>
                            </div>
                            <p class="trueAnswerTitle">正确答案:</p>
                            <div class="trueAnswerCover">
                                <p class="trueAnswerItem" v-for="(trueItem,trueIndex) in item.son">{{trueItem.qNum}}. <span>{{trueItem.alternatives}}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

        </div>
    </div>
    <!-- 底部按钮 -->
    <div class="footNav">
        <div class="footNavCover">
            <a href="javascript:void(0)" class="reviewBtn" style="visibility: hidden"></a>
            <div class="quesNumCover">
                <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                <a href="javascript:void(0)"
                   :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': index == current }"
                   v-for="(item,index) in dataQuestion.question_list"
                   @click="welter(item.pid,item.content_id,index,item.status)" @mouseover="followIn($event)"
                   @mouseout="followOut($event)">{{index+1}}</a>
            </div>
            <div class="turnBtn">
                <a href="javascript:void(0)" class="prevBtn" @click="prev()" v-show="current>0">
                    <img src="/cn/images/exerciseNew/18@2x.png" alt="">
                    <span>上一题</span>
                </a>
                <a href="javascript:void(0)" class="nextBtn" @click="next()"
                   v-show="dataQuestion!=''&&current<dataQuestion.question_list.length-1">
                    <img src="/cn/images/exerciseNew/19@2x.png" alt="">
                    <span>下一题</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 交卷弹窗 -->
    <div class="carryOut" v-if="confirmPop" v-cloak>
        <div class="carryContent">
            <div class="carryTitle">
                交卷
                <img src="/cn/images/exerciseNew/chacha.png" alt="" class="closeOut" @click="confirmPop = false">
            </div>
            <p class="carryTip">
                共有试题{{dataQuestion!=''?dataQuestion.question_list.length:''}}题，已做{{doLength}}题。您确定要交卷吗？</p>
            <div class="carryBtn">
                <a href="javascript:void(0)" class="confirmPaper" @click="submitText">确认交卷</a>
                <a href="javascript:void(0)" class="checkBtn" @click="confirmPop = false">再检查一下</a>
            </div>
        </div>
    </div>
</section>


<script src="/cn/js/exerciseReview/listenDetail.js?v=1.6"></script>


